<template>
  <div class="card card-custom card-stretch gutter-b">
    <!--begin::Header-->
    <div class="card-header border-0">
      <h3 class="card-title font-weight-bolder text-dark">Methods</h3>
    </div>
    <!--end::Header-->
    <!--begin::Body-->
    <div class="card-body pt-0">
      <template >
        <!--begin::Item-->
        <div class="mb-10" v-for="(item, i) in list" v-bind:key="i">
          <!--begin::Section-->
          <div class="d-flex align-items-center">
            <!--begin::Symbol-->
            <div class="symbol symbol-45 symbol-light mr-5">
              <span class="symbol-label">
                <inline-svg
                  :src="item.svg"
                  class="h-50 align-self-center"
                ></inline-svg>
              </span>
            </div>
            <!--end::Symbol-->
              <router-link
                :to="item.href"
                v-slot="{ href, navigate, isActive, isExactActive }"
              >
              <a :href="href"  class="text-muted text-hover-primary font-weight-bold">
            <!--begin::Text-->
            <div class="d-flex flex-column flex-grow-1">
              <a
                class="font-weight-bold text-dark-75 text-hover-primary font-size-lg mb-1"
              >
                {{ item.title }}
              </a>
              <span class="text-muted font-weight-bold">
                {{ item.alt }}
              </span>
            </div>
            <!--end::Text-->
              </a>
              </router-link>
          </div>
          <!--end::Section-->
        </div>
        <!--end::Item-->
      </template>
    </div>
    <!--end::Body-->
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "widget-8",
  data() {
    return {
      list: [
        {
          title: "功能点度量",
          desc:
            "A brief write up about the top Authors that fits within this section",
          alt: "By CSU Team",
          svg: "media/svg/misc/012-foursquare.svg",
          href: "/fp"
        },
        {
          title: "用例图度量",
          desc:
            "A brief write up about the Popular Authors that fits within this section",
          alt: "By CSU Team",
          svg: "media/svg/misc/010-vimeo.svg",
          href: "/uc"
        },
        {
          title: "面向对象度量",
          desc:
            "A brief write up about the New Users that fits within this section",
          alt: "By CSU Team",
          svg: "media/svg/misc/014-kickstarter.svg",
          href: "/OOM/ck"
        },
        {
          title: "控制流图度量",
          desc:
            "A brief write up about the New Users that fits within this section",
          alt: "By CSU Team",
          svg: "media/svg/misc/009-hot-air-balloon.svg",
          href: "/cfg"
        },
        {
          title: "信息流度量",
          desc:
            "A brief write up about the New Users that fits within this section",
          alt: "By CSU Team",
          svg: "media/svg/misc/011-swarm.svg",
          href: "/iff"
        },
        {
          title: "代码行度量",
          desc:
            "A brief write up about the New Users that fits within this section",
          alt: "By CSU Team",
          svg: "media/svg/misc/008-infography.svg",
          href: "/loc"
        }
      ]
    };
  },
  components: {

  },
  computed: {
    ...mapGetters(["layoutConfig"])
  }
};
</script>
